<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue.js - 基础</title>
    <style>
        .box1{
            width: 600px;
            height: 600px;
            background-color: red;
            margin: 50px auto;
        }
        .box2{
            width: 400px;
            height: 400px;
            background-color: green;
            margin: 50px auto;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: blue;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 
           修饰符: .passive
            passive 选项的默认值始终为false。但是，这引入了处理某些触摸事件（以及其他）的事件监听器在尝试处理滚动时阻止浏览器的主线程的可能性，从而导致滚动处理期间性能可能大大降低。

            简而言之: 使用passive 可以优化移动端上滚屏的性能.
        -->
        <!-- 
            left - (2.2.0) 只当点击鼠标左键时触发。
            .right - (2.2.0) 只当点击鼠标右键时触发。
            .middle - (2.2.0) 只当点击鼠标中键时触发。
        
        -->
         <!-- 使用事件修饰符 : {keyCode | keyAlias } 根据按键的键码来触发事件 -->
         <input type="text" @keydown.13="handler2($event , '13')">
         <input type="text" @keydown.a="handler2($event , 'a')">
         <hr>
        <input type="text" @keydown.enter="handler2($event , '回车')">
        <input type="text" @keydown.down="handler2($event , '下键')">
        <input type="text" @keydown.up="handler2($event , '上键')">
        <input type="text" @keydown.right="handler2($event , '右键')">
        <input type="text" @keydown.left="handler2($event , '左键键')">
        <hr>
         <!-- 使用事件修饰符 : .once 绑定一次事件 -->
        <button @click.once="handler">绑定一次事件</button>
        <hr>
        <!-- 使用事件修饰符 : .prevent 来阻止默认事件 -->
        <a href="http://baidu.com" @click.prevent="handler">百度</a>
         <!-- 使用事件修饰符 : .capture 来使用捕获事件流监听事件 -->
        <div class="box1" @click.capture="handler($event , 'box1')">
            box1
             <!-- 使用事件修饰符 : .self 只触发自身上的事件(对于捕获,冒泡事件无效)事件 -->
            <div class="box2" @click.self="handler($event , 'box2')">
                box2
                 <!-- 使用事件修饰符 : .stop 来阻止冒泡事件 -->
                <div class="box3" @click="handler($event , 'box3')">box3</div>
            </div>
        </div>
    </div> 

    <!-- 引入vue框架 开发版 :包含警告 和调试信息 -->
    <script src="../lib/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",//指定Vue挂载的DOM
            data:{//当前vue实例中使用的数据

            },
            methods:{//当前Vue实例中使用到的方法
                handler(e , flag){
                    //原生:
                    // e.stopPropagation(); //阻止事件冒泡
                    // e.preventDefault(); //阻止默认事件

                    console.log(e.target,'点击事件', flag)
                },
                handler2(e , type){
                    console.log(e.target , type);
                }
            }
        })
    </script>
</body>
</html>